<template>
	<div class="orderdetailforlook">
		<div class="od_head">
			<div class="odh_img">
				<el-avatar shape="square" :size="160"  :src="url"></el-avatar>
				<!-- :fit="fill" -->
			</div>
			<div class="odh_desc">
				<div class="odh_desc_head">
					<div>咚咚哒哒美食店</div>
					<div><el-button type="primary" round size="small" @click="returnHistoryOrder">返回</el-button></div>
				</div> 
				
				<div class="hr" />
				<div class="odh_desc_tel">
					<i class="iconfont">&#xe625;</i> 13442345436
				</div>
				<div class="odh_desc_address">
					<i class="iconfont">&#xe60e;</i> 沈阳市浑南区白塔街道东北大学浑南校区
				</div>
			</div>
		</div>
		<div class="od_card">
			<div class="odc_true">实付金额：<i class="iconfont">&#xe6b6;</i> {{this.orderdata.order_true_price}}</div>
			<div class="desc">
				<div class="odc_id"><i class="iconfont">&#xe61a;</i>订单号码：{{this.orderdata.order_id}}</div>
				<div class="odc_createtime" style="margin-top: 8px;">
					<i class="iconfont">&#xe6f8;</i>创建时间：{{this.orderdata.order_create_time}}
				</div>
				<div class="odc_paidtime" style="margin-top: 8px;">
					<i class="iconfont">&#xe6f8;</i>支付时间：{{this.orderdata.order_pay_time}}</div>
				<div class="odc_carrier" style="margin-top: 8px;">
					<i class="iconfont">&#xe632;</i>骑手姓名：{{this.orderdata.carrier}}</div>
				<div class="odc_tel" style="margin-top: 8px;">
					<i class="iconfont">&#xe625;</i>骑手电话：{{this.orderdata.carrier_telephone}}</div>
				<div class="odc_origin" style="margin-top: 8px;">
					<i class="iconfont">&#xe630;</i>原始价格：{{this.orderdata.order_original_price}}</div>
				<div class="odc_address" style="margin-top: 8px;">
					<i class="iconfont">&#xe60e;</i>收货地址：{{this.orderdata.userAddress.receiver_address}}</div>
				<div class="odc_paidstyle" style="margin-top: 8px;">
					<i class="iconfont">&#xe603;</i>支付方式：{{this.orderdata.pay_style}}</div>
			</div>
		</div>
		<div class="od_food">
			<div class="odf_head">菜品列表</div>
			<!--
			<div class="odf_card">
				<div class="odf_card_img">
				<el-avatar shape="square" :size="60" :fit="fill" :src="url" ></el-avatar>
				</div>
				<div>
					
				</div>
				<div class="hr"/>
			</div>
			-->
			<el-table :data="tableData" border style="width:760px; margin: 20px;">
				<el-table-column label="菜品图片" width="100">
					<template slot-scope="scope">
						<!--  -->
						<el-avatar shape="square" :size="60"  :src="`http://localhost:8080/res/${scope.row.food.food_img}`"
							style="margin-left: 10px;margin-right: 10px;"
							></el-avatar>
<!-- 						:fit="fill" -->
					</template>
				</el-table-column>
				
				<el-table-column prop="food_name" label="菜品名称" width="130">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{scope.row.food_name}}</span>
					</template>
				</el-table-column>
				
				<el-table-column prop="food_amount" label="菜品数量" width="130">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{scope.row.food_amount}}</span>
					</template>
				</el-table-column>
				
				<el-table-column prop="food.food_weight" label="备注">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{scope.row.detail_attach}}</span>
					</template>
				</el-table-column>
				
				<el-table-column prop="food_total" label="总价" width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{scope.row.food_total}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button @click="evaluate(scope.row)" type="primary" icon="el-icon-search">评论</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

	</div>
</template>

<script>
	export default {
		name: "OrderDetail",
		data() {
			return {
				url: require('../../assets/餐厅.jpg'),
				order_id : '',
				tableData: [],
				orderdata:'',
			}
		},
		created() {
			this.order_id = this.$route.params.data;
			console.log(this.order_id);
			this.axios.get(`http://localhost:8080//goodorderdetail/getorderdetail/`+this.order_id).then(res => {
				console.log(res.data);
				this.tableData = res.data.usergoodorderlist;
			}),
			this.axios.get(`http://localhost:8080//goodorder/getgoodorder/`+this.order_id).then(res => {
				this.orderdata = res.data.usergoodorder;
				if(this.orderdata.pay_style == 41){
					this.orderdata.pay_style = "微信";
				}if(this.orderdata.pay_style == 42){
					this.orderdata.pay_style = "支付宝";
				}if(this.orderdata.pay_style == 43){
					this.orderdata.pay_style = "翼支付";
				}
			})
		},
		methods:{
			evaluate(row){
				
				if(this.orderdata.status==18 || this.orderdata.status==17){
					this.$router.push({
						name: 'Evaluate',
						params:{data:row.food_id,
								orderid:this.order_id}},
					);
				}else{
					alert("您还不能对菜品进行评价！")
				}
				
			},
			returnHistoryOrder(){
				this.$router.push(
					{
						name:'PersonalHistoryOrder',
					},			
				);
			}
		},
		
	}
</script>

<style scoped lang="less">
	.orderdetailforlook {
		width: 800px;
		height: 100%;
		margin: 0 auto;

		//background-color: #F2F6FC;
		.od_head {
			margin-top: 10px;
			height: 200px;
			display: flex;
			background-color: #F2F6FC;
			box-shadow: 0 2px 2px 0 rgba(96, 98, 102, 0.1);

			.odh_img {
				flex: 1;
				margin: 20px;
			}

			.odh_desc {
				flex: 5;
				//background-color: lightcoral;
				margin: 10px;

				.odh_desc_head {
					display: flex;
					justify-content:space-between;
					margin-top: 10px;
					font-family: "Helvetica Neue";
					font-size: 22px;
					line-height: 24px;
					color: #606266; //字体颜色
					font-weight: 400; //加粗
					letter-spacing: .1em;
									
				}

				.odh_desc_tel {
					margin-top: 25px;
					font-family: "Helvetica Neue";
					font-size: 18px;
					color: #909399; //字体颜色
					font-weight: 400; //加粗
					letter-spacing: .1em;
				}

				.odh_desc_address {
					margin-top: 25px;
					font-family: "Helvetica Neue";
					font-size: 18px;
					color: #909399; //字体颜色
					font-weight: 400; //加粗
					letter-spacing: .1em;
				}


			}
		}

		.od_card {
			height: 300px;
			margin-top: 20px;
			//margin: 50px auto;
			box-shadow: 0 2px 2px 0 rgba(96, 98, 102, 0.1);
			background-color: #F2F6FC;

			.odc_true {
				padding-top: 20px;
				padding-left: 20px;
				font-family: "Helvetica Neue";
				font-size: 18px;
				color: #303133; //字体颜色
				font-weight: 400; //加粗
				letter-spacing: .1em;

			}

			.desc {
				padding: 20px;
				font-family: "Helvetica Neue";
				font-size: 14px;
				color: #909399; //字体颜色
				font-weight: 400; //加粗
				letter-spacing: .4em;
			}

		}

		.od_food {
			margin-top: 20px;
			//height: 300px;
			background-color: #F2F6FC;

			.odf_head {
				padding-top: 20px;
				padding-left: 20px;
				font-family: "Helvetica Neue";
				font-size: 22px;
				line-height: 24px;
				color: #606266; //字体颜色
				font-weight: 400; //加粗
				letter-spacing: .1em;
			}

			.odf_card {
				height: 80px;
				margin: 20px;
				background-color: lightblue;

				.odf_card_img {
					padding-top: 10px;
					margin: 10px;
				}
			}
		}

		//分割线
		.hr {
			border-bottom: 2px solid #606266;
			height: 0px;
			padding-bottom: 20px;
		}
	}
</style>
